<!--
页面名称: xxx.vue
页面描述: 该页面为xxx
开发人员: Vikanong
开发时间: 2018-xx-xx
其他说明: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-->
<template>
  <el-dialog
    :visible.sync="visible"
    title="坐标选择"
    :modal="false"
    width="52%"
  >
    <el-form
      ref="form"
      :model="LngLatObj"
      label-width="80px"
    >
      <el-row>
        <el-col :span='12'>
          <el-form-item label="经度">
            <el-input v-model="LngLatObj.lng"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label="纬度">
            <el-input v-model="LngLatObj.lat"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span='12'>
          <el-form-item label="搜索">
            <el-input
              v-model="LngLatObj.val"
              @keyup.enter.native="Search"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col
          :span='10'
          :offset="1"
        >
          <el-button @click="Search">查询</el-button>
          <el-button @click="addLngLatObj">添加</el-button>
        </el-col>
      </el-row>
    </el-form>

    <baidu-map
      class="bm-view"
      ak="9aV9lMwHBbAktSKxpnG6ADMqXEv2p8iV"
      @ready="handler"
    >
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!-- <bml-marker-clusterer :averageCenter="true"> -->
      <!-- <bm-marker
                v-for="marker of markers"
                :key="marker.code"
                :position="{lng: marker.lng, lat: marker.lat}"
                @click="lookDetail(marker)"
              >
              </bm-marker> -->
      <!-- </bml-marker-clusterer> -->
    </baidu-map>

  </el-dialog>
</template>

<script>
import {
  BaiduMap,
  BmMarker,
  BmlMarkerClusterer,
  BmGeolocation
} from "vue-baidu-map";
export default {
  data() {
    return {
      visible: false,
      LngLatObj: {
        lng: "",
        lat: "",
        val: ""
      },
      map: {}
    };
  },
  props: ["UpdateVal"],
  components: {
    BaiduMap,
    BmMarker,
    BmlMarkerClusterer,
    BmGeolocation
  },
  created() {
    let _this = this;
    if (this.UpdateVal) {
      this.LngLatObj.lng = this.UpdateVal.split(",")[0];
      this.LngLatObj.lat = this.UpdateVal.split(",")[1];
    }
  },
  mounted() {
    let _this = this;
  },

  methods: {
    init() {
      this.visible = true;
    },
    addLngLatObj() {
      this.$emit("getLngLat", this.LngLatObj);
      this.visible = false;
    },

    //创建地图
    handler({ BMap, map }) {
      let _this = this;
      _this.map = map;

      // map.disableDoubleClickZoom()   //关闭双击放大
      //开启鼠标滚轮缩放,默认关闭
      map.enableScrollWheelZoom(false);
      //添加缩略图控件
      map.addControl(
        new BMap.OverviewMapControl({
          isOpen: false,
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        })
      );
      //添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      //添加比例尺控件
      map.addControl(new BMap.ScaleControl());
      if (this.UpdateVal) {
        let point = new BMap.Point(_this.LngLatObj.lng, _this.LngLatObj.lat);
        map.addOverlay(new BMap.Marker(point));
        map.centerAndZoom(point, 16);
      } else {
        map.centerAndZoom("成都", 12); //设置中心点
      }

      map.addEventListener("click", function(e) {
        _this.LngLatObj.lat = e.point.lat;
        _this.LngLatObj.lng = e.point.lng;
        map.addOverlay(
          new BMap.Marker(
            new BMap.Point(_this.LngLatObj.lng, _this.LngLatObj.lat)
          )
        );
        _this.deletePoint(map);
      });
    },
    //搜索地点,
    Search() {
      let _this = this;
      if (_this.LngLatObj.val != "") {
        let local = new BMap.LocalSearch(_this.map, {
          renderOptions: { map: _this.map }
        });
        local.search(_this.LngLatObj.val);
      }
    },
    deletePoint(map) {
      let allOverlay = map.getOverlays();
      for (var i = 0; i < allOverlay.length - 1; i++) {
        map.removeOverlay(allOverlay[i]);
      }
    }
  },
  computed: {}
};
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 450px;
}
</style>